<template>
  <div class="home">
    <home-header>
      <div slot="title" :style="backgroundDiv" class="logoImg"></div>
    </home-header>
    <home-banner></home-banner>
    <home-city></home-city>
    <home-nav></home-nav>
    <home-section-tab></home-section-tab>
    <home-Choiceness-hotel></home-Choiceness-hotel>
  </div>
</template>
<script>
import HomeHeader from "../header/Header";
import HomeBanner from "./components/Banner";
import HomeCity from "./components/city/City";
import HomeNav from "./components/Nav";
import HomeSectionTab from "./components/SectionTab";
import HomeChoicenessHotel from "./components/ChoicenessHotel";
export default {
  name: "home",
  components: {
    HomeHeader,
    HomeBanner,
    HomeCity,
    HomeNav,
    HomeSectionTab,
    HomeChoicenessHotel
  },
  data() {
    return {
      backgroundDiv: {
        backgroundImage: "url(" + require("@/assets/images/logo.png") + ")"
      }
    };
  }
};
</script>

<style lang="stylus" scoped>
.logoImg {
  // width: 3.519rem;
  height: 1.173rem;
  background: no-repeat center top;
  background-position: center center;
  background-size: contain;
  text-align: center;
}
</style>
